<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
    <title>服务评价</title>
    <link rel="stylesheet" type="text/css" href="../css/public-head.css" />
    <link rel="stylesheet" type="text/css" href="../css/service-evaluation.css" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <style>
        html,
        body {
            background-color: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div class="main">
        <!--技师评价-->
        <div class="score">
            <div class="score-tou" id="scoreTou">
                <div><img src="../image/icon/jishixiaoge@2x.png" alt="" /></div>
            </div>
            <div class="score-service">
                <div>技师评分</div>
                <div class="cleanfloat" id="star">
                    <span><img class="starImg" src="../image/icon/xingx-hui@2x.png" alt="" /></span>
                    <span><img class="starImg" src="../image/icon/xingx-hui@2x.png" alt="" /></span>
                    <span><img class="starImg" src="../image/icon/xingx-hui@2x.png" alt="" /></span>
                    <span><img class="starImg" src="../image/icon/xingx-hui@2x.png" alt="" /></span>
                    <span><img class="starImg" src="../image/icon/xingx-hui@2x.png" alt="" /></span>
                    <span id="score" style="color: red"></span>
                </div>
            </div>
        </div>
        <!--选择评价-->
        <div class="choice">
            <div class="choice-btn" id="choiceBtn">
                <!--<div class="service-block-btn service-action">
                    <span>爱车养护到位</span>
                </div>
                <div class="service-block-btn">
                    <span>服务效率高</span>
                </div>
                <div class="service-block-btn">
                    <span>及时取车送车</span>
                </div>
                <div class="service-block-btn service-action">
                    <span>靠谱</span>
                </div>
                <div class="service-block-btn">
                    <span>养车经验丰富</span>
                </div>
                <div class="service-block-btn">
                    <span>技师态度好</span>
                </div>-->
            </div>
        </div>
        <!--意见-->
        <div class="opinion">
            <form action="save.php" method="post">
                <!--分别是行数和列数-->
                <textarea cols="5" rows="1" id="formtext" placeholder="其他建议和意见" style="color:#1B1B1B;"></textarea><br>
            </form>
            <div class="opinion-btn">
                <button id="button" tapmode onclick="fnSubmission()">提交</button>
            </div>
        </div>
        <!--弹窗-->
        <div class='demo'>
            <div class='demo-bg'>
                <div class='demo-txt' tapmode onclick="closeDialog()">
                    <p class="demo-txt-1">评价成功 !</p>
                    <p class="demo-txt-2">感谢您的评价,期待再次下单</p>
                    <a onclick="back_head()">返回首页</a>
                </div>
            </div>

        </div>

    </div>
</body>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script src="../script/template-web.js"></script>
<!--技师头像数据模型-->
<script type="text/html" id="HeadImg">
    <div><img src="{{data.head_img}}" alt="" /></div>
</script>
<!--服务评价技术模型-->
<script type="text/html" id="Choice">
    {{each data as val i}} {{if val.id=="1"}}
    <div class="service-block-btn" id="{{val.id}}" tapmode onclick="serviceOf({{i}},{{val.id}})">
        <span>{{val.name}}</span>
    </div>
    {{ else if val.id=="2"}}
    <div class="service-block-btn" id="{{val.id}}" tapmode onclick="serviceOf({{i}},{{val.id}})">
        <span>{{val.name}}</span>
    </div>
    {{ else if val.id=="3"}}
    <div class="service-block-btn" id="{{val.id}}" tapmode onclick="serviceOf({{i}},{{val.id}})">
        <span>{{val.name}}</span>
    </div>
    {{ else if val.id=="4"}}
    <div class="service-block-btn" id="{{val.id}}" tapmode onclick="serviceOf({{i}},{{val.id}})">
        <span>{{val.name}}</span>
    </div>
    {{ else if val.id=="5"}}
    <div class="service-block-btn" id="{{val.id}}" tapmode onclick="serviceOf({{i}},{{val.id}})">
        <span>{{val.name}}</span>
    </div>
    {{ else if val.id=="6"}}
    <div class="service-block-btn" id="{{val.id}}" tapmode onclick="serviceOf({{i}},{{val.id}})">
        <span>{{val.name}}</span>
    </div>
    {{/if}}{{/each}}
</script>

<script type="text/javascript">
    var ids = [];
    apiready = function() {
      console.log(JSON.stringify(api.pageParam.orderInfo));
        init();
        fnHeadImg();
        fnChoiceBtn();
    };

    headInner({
            title: "",
            //headleft
            headl: '<a href="javascript:history.back(-1)" style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin()"></a>',
            //headright
            headr: '<a style="color:white"></a>',
            color: "", //默认是蓝色
            padding: "0px 0px 0px",
        })
        //获取技师头像
    function fnHeadImg() {
      console.log(api.pageParam.orderInfo.master.id);
        BASE.MYajax({
            'pathName': 'order/getMaster', //请求路径
            'methods': 'get',
            'ajaxData': {
                values: {
                    orders_id:api.pageParam.orderInfo.orders_id
                }
            },
            'method': headData //调用函数
        });
    }

    function headData(ret, err) {
        if (ret.code == 200) {
            console.log(JSON.stringify(ret))
            if(ret.data.head_img!=undefined){
            var html = template("HeadImg", ret);
            //渲染进页面中
            document.getElementById('scoreTou').innerHTML = html;
          }
        } else {
            reToast(ret, err)
        }
    }

    //获取技师评价列表
    function fnChoiceBtn() {
        BASE.MYajax({
            'pathName': 'evaluate/index', //请求路径
            'methods': 'get',
            'method': callData //调用函数
        });
    }
    function callData(ret, err) {
        if (ret.code == 200) {
            console.log(JSON.stringify(ret))
            var html = template("Choice", ret);
            //渲染进页面中
            document.getElementById('choiceBtn').innerHTML = html;
        } else {
            reToast(ret, err)
        }
    }


    /*五角星切换*/
    // var star = document.getElementsByTagName("img"); //首先要获取图片,相当于装到一个数组里面
    var star=$api.domAll($api.byId("star"),".starImg");
    //读取数组的索引
    for (var i = 0; i < star.length; i++) {
        star[i].setAttribute("index", i + 1);
        star[i].onclick = function() {
            //读取元素的属性值
            var result = event.srcElement.getAttribute("index");
            //document.getElementById("score").innerHTML= result;//渲染分数
            var newindex = result - 1;
            for (var j = 0; j <= newindex; j++) {
                star[j].setAttribute("src", "../image/icon/xingx-h@2x.png");//红色
            }
            for (var j = newindex + 1; j < star.length; j++) {
                star[j].setAttribute("src", "../image/icon/xingx-hui@2x.png");//灰色
            }
        }
    }

    //用户评价按钮切换
    function serviceOf(index_, id) {
        var btn = document.getElementsByClassName("service-block-btn");
        var clas = btn[index_].getAttribute("class");
        if (clas.indexOf("service-action") != -1) {
            btn[index_].setAttribute('class', 'service-block-btn');
        } else {
            btn[index_].setAttribute('class', "service-block-btn service-action");
        }
        var index = ids.indexOf(id);
        if (-1 != index) {
            ids.splice(index, 1);
        }
        ids.push(id)
    }

    //弹窗
    var demobg = document.querySelector(".demo-bg");
    var demotxt = document.querySelector(".demo-txt");
    //提交服务评价
    function fnSubmission() {
        //文本框的值
        var formtext = $api.byId('formtext').value;
        console.log(formtext);
        //取五角星的长度
        var j = 0;
        var list = document.getElementsByClassName("starImg");
        for(var i = 0; i < list.length; i ++){
            if(list[i].src.indexOf("h@2x") != -1){
              j+=1;
            }
        }
        console.log(j);
        console.log(api.pageParam.orderInfo.orders_id);
        console.log(api.pageParam.orderInfo.master.id);
        console.log(ids);
        BASE.MYajax({
            'pathName': 'evaluate/add', //请求路径
            'methods': 'post',
            'ajaxData': {
                values: {
                  // 订单ID,评分,技师ID,评价内容,服务短语ID
                    orders_id: api.pageParam.orderInfo.orders_id,
                    score:j,
                    master_id: api.pageParam.orderInfo.master.id,
                    content: formtext,
                    impress: ids//服务的短语ID（从评价关键词列表中获取）
                }
            },
            'method': subData //调用函数
        });
    }
    function subData(ret, err) {
        if (ret.code == 200) {
            console.log('提交成功哦' + JSON.stringify(ret))
            openDialog()
        } else {
            reToast(ret, err)
        }
    }
    //打开弹窗
    function openDialog() {
        demotxt.style.display = "block";
        demobg.style.display = "block";
    }
    //关闭弹窗
    function closeDialog() {
        demotxt.style.display = "none";
        demobg.style.display = "none";
    }

    function MyOrder() {
        api.openWin({
            name: 'MyOrder',
            url: '../html/MyOrder.html'
        });
    }
    function back_head() {
      api.closeToWin({
          name: 'Main_Frame'
      });
      api.openWin({
          name: 'Main_Frame',
          url: 'Main_Frame.html',
          bounces: false,
          slidBackEnabled: false,
          delay: 300,
          animation: {
              type: 'ripple',
              duration: 1000
          }
      })
    }
</script>

</html>
